<!-- Dom模板 -->
<template>
  <div class="CSbox">
    <!-- Dom内容 -->
    <van-nav-bar
      title="收银台"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="yve">
      <div>￥<span>{{$store.state.bags.transientMoney}}</span></div>
      <div>点券充值</div>
    </div>
    <div class="way">
      <div>支付方式</div>
      <div>微信</div>
    </div>
    <div class="btn">
      <button @click="showPopup">确认支付</button>
    </div>
    <!-- <van-cell is-link >展示弹出层</van-cell> -->
    <van-popup v-model="show" position="top" :style="{ height: '50%' }">
      
    </van-popup>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      show: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    onClickLeft() {},
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
.CSbox{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: white;
}
.yve {
  margin: 30px 0;
  text-align: center;
}
.yve > div:nth-child(1) {
  font-size: 15px;
}
.yve > div:nth-child(1) span {
  font-size: 32px;
}
.yve > div:nth-child(2) {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
}
.way {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px;
  font-size: 17px;
}
.btn {
  text-align: center;
  position: absolute;
  bottom:20px;
  width: 100vw;
}
.btn>button{
  width:320px;
  border-radius: 30px;
  padding:8px 0;
  color:white;
  background-color: tomato;
  font-size: 17px;
  border:none;
}
</style>